<template>
  <div>
    <Header :title="address" />
    <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
    />
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import { Toast } from "vant";

export default {
  components: { Header },
  data(){
    return{
      areaList: {
        province_list: {
          320000: "江苏省",
          110000: "广东省",
          120000: "浙江省",
        },
        city_list: {
          320100: "南京市",
          110100: "广州市",
          110200: "深圳市",
          120100: "杭州市",
          120200: "宁波市",
        },
        county_list: {
          320115: "江宁区",
          320105: "秦淮区",
          110101: "天河区",
          110102: "海珠区",
          120102: "上城区",
          130102: "下城区",
        },
      },
      addressInfo: {},
    }
  },
  mounted(){
    this.init();
  },
  computed:{
    address(){
        return this.$route.query.type === "add" ? "地址新增" : "地址编辑";
    },
  },
  methods: {
    //数据初始化
    init() {
      this.$store.state.userAddress.forEach((item) => {
        if (item.id === Number(this.$route.query.id)) {
          this.addressInfo = item;
        }
      });
    },


    //保存的按钮
    onSave(content) {
      if (this.$route.query.type === "add") {
        this.$store.commit("ADDADDRESS", content);
      } else {
        this.$store.commit("CHANGEADDRESS", content);
      }
      Toast("保存成功");
      setTimeout(() => {
        this.$router.back();
      }, 1000);
    },

    //删除的按钮
    onDelete(content) {
      this.$store.commit("DELETEADDRESS", content);
      Toast("删除成功");
      setTimeout(() => {
        this.$router.back();
      }, 1000);
    },

  },
};
</script>

<style lang='less' scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
</style>